/**
 * Created by Freeman on 2016/8/8.
 */
import React, {PropTypes} from 'react'
import classnames from 'classnames'
import tiny from '../../assets/images/tiny.gif'
const Tags = ({tagList, options, isFetching,changeSort}) => {

    Tags.propTypes = {
        tagList: PropTypes.array.isRequired,
        options: PropTypes.object.isRequired,
        isFetching: PropTypes.bool.isRequired,
        changeSort: PropTypes.func.isRequired
    };

    return (
        <ul className="sort-tags list-unstyled clearfix">
            <li>
                <a className={classnames({
                        'active' : options.sortName === 'publish_time'
                })} onClick={e =>changeSort(e,{'pageNo':1,'sortName':'publish_time','tagId':''}) } href="javascript:;">最新</a>
            </li>
            <li>
                <a className={classnames({
                    'active' : options.sortName === 'visit_count'
                })} onClick={e => changeSort(e,{'pageNo':1,'sortName':'visit_count','tagId':''})}
                   href="javascript:;">最热</a>
            </li>
            {
                tagList.map((tag, i) =>
                    <li key={i}>
                        <a className={classnames({
                            'active' : options.tagId === tag._id
                        })} onClick={e => changeSort(e,{'pageNo':1,'sortName':'','tagId':tag._id})}
                           href="javascript:;">{tag.name}</a>
                    </li>
                )
            }

            {isFetching &&
            <li>
                <img className="loader-tiny" src={tiny}/>
            </li>
            }
        </ul>
    )
};

export default Tags;